html {
    /* font-size必须大于等于12，否则不生效*/
    font-size: 12px; 
}

html, body {
    margin: 0px;
    padding: 0px;
}

.box {
    width: 35rem;
    height: 38rem;
    background: rgb(205, 205, 205);
    border-radius: 1rem;
    margin: 5% auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  background: #fff url('./images/ios_clock.svg') no-repeat center;
  background-size: 88%;
  border-radius: 50%;
  position: relative;
}

.clock:after {
  /* content是必须的，不然伪元素不会显示 */
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 向坐上移动自身的50% */
  transform: translate(-50%, -50%); 
  z-index: 10;
}

.hours-container, .minutes-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* .hours-container {
  animation: rotate 43200s infinite linear;
}

.minutes-container {
  animation: rotate 3600s infinite steps(60);
}

.seconds-container {
  animation: rotate 60s infinite steps(60);
} */

.hours {
  width: 3%;
  height: 20%;
  background: #000;
  position: absolute;
  top: 30%;
  left: 48.5%;
}

.minutes {
  width: 2%;
  height: 37%;
  background: #000;
  position: absolute;
  top: 13%;
  left: 49%;
}

.seconds {
  width: 1%;
  height: 40%;
  background: #f00;
  position: absolute;
  top: 20%;
  left: 49.5%;
  z-index: 8;
}

/* @keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}*/
 

